<!DOCTYPE html>
<html>
<head>
    <title>tooltip</title>
    <!-- 让IE采用最新的渲染模式 -->
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <!-- 移动端的页面宽度等于设备宽度，缩放比为1 -->
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <link rel="stylesheet" type="text/css" href="../qa/static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../qa/static/css/style_ui.css">
</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="#"class="tooltip tooltip-effect-1" >Home
            <span class="tooltip-content"><i class="fa fa-home fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-2" >About me
            <span class="tooltip-content"><i class="fa fa-user fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-3" >Photography
            <span class="tooltip-content"><i class="fa fa-camera-retro fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-4" >Work
            <span class="tooltip-content"><i class="fa fa-briefcase fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-5" >Contact
            <span class="tooltip-content"><i class="fa fa-envelope fa-fw"></i></span>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
